import '../../../node_modules/leaflet/dist/leaflet.css'

import React, { useEffect, useRef } from 'react';

import L from "leaflet";
// import 'leaflet/dist/leaflet.css';
// import '../../../node_modules/leaflet/dist/leaflet.css'


// 如果天地图的脚本还没有被引入，您可以在这里使用 React Helmet 或直接在 public/index.html 中添加
// import Helmet from 'react-helmet';
// 然后在组件中使用 Helmet 来引入脚本
// <Helmet>
//   <script src="https://t{s}.tianditu.gov.cn/api?v=4.0&tk=您的API密钥" />
// </Helmet>
export default function Index() {
  const mapRef = useRef(null);
  useEffect(() => {
    // 初始化地图
    const map = L.map('mapDiv', {
      crs: L.CRS.EPSG4326, // 使用EPSG:4326坐标参考系
      center: [39.92, 116.39], // 设置中心点（例如北京）
      zoom: 10, // 设置缩放级别
      attributionControl: false, // 隐藏属性说明控件
    });

    // 添加天地图瓦片图层
    const tileLayerUrl = `https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=03cd4b8189df52cc8fba3d9fd345f747`;
    const tileLayerUrl1 = 'http://api.tianditu.gov.cn/api?v=4.0&tk=03cd4b8189df52cc8fba3d9fd345f747'
    const tileLayer = L.tileLayer(tileLayerUrl, {
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      maxZoom: 11, // 最大缩放级别
    }).addTo(map);

  // useEffect(() => {
  //   const script = document.createElement('script');
  //   script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=03cd4b8189df52cc8fba3d9fd345f747';
  //   script.async = true;
  //   script.onload = () => {
  //     // 地图脚本加载完成后初始化地图
  //     const map = new L.Map(mapRef.current);
  //     // map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);
  //   };
  //   document.body.appendChild(script);

  //   // 清理函数，当组件卸载时移除脚本标签
  //   return () => {
  //     document.body.removeChild(script);
  //     // 如果需要，可以在这里添加地图销毁的逻辑
  //   };
  }, []);
  // useEffect(() => {

  //   const map = L.map(mapRef.current, {
  //     center: [39.984060, 116.457066], // 北京市中心经纬度
  //     zoomControl: true,
  //     maxZoom: 9,
  //     minZoom: 3,
  //     attributionControl: false
  //   });

  //   // 添加天地图矢量图层（这里使用的是影像图，您可以根据需要更改）
  //   const imgLayer = L.tileLayer(`http://t0.tianditu.gov.cn/vec_c/wmts?tk=03cd4b8189df52cc8fba3d9fd345f747`, {
      
  //         maxZoom: 20,
  //         tileSize: 256,
  //         zoomOffset: 1,
        
  //   }).addTo(map);

  //   return () => {
  //     map.removeLayer(imgLayer);
  //     map.remove();
  //   };
  // }, []);

  return <div id="mapDiv" ref={mapRef} style={{ height: '700px', width: '1000px',position: 'absolute' }} />;
}